<template>
  <div class="wrap">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="首页弹窗" name="windowSwitch"></el-tab-pane>
      <el-tab-pane label="跑马灯" name="horseSwitch"></el-tab-pane>
      <el-tab-pane label="秒批口子" name="secondBatchSwitch"></el-tab-pane>
      <el-tab-pane label="芝麻分贷" name="zmSwitch"></el-tab-pane>
      <el-tab-pane label="不查征信" name="noValidateSwitch"></el-tab-pane>
      <el-tab-pane label="身份证贷" name="idcardLoanSwitch"></el-tab-pane>
       <el-tab-pane label="小额快贷" name="smallLoanSwitch"></el-tab-pane>
       <el-tab-pane label="大额低息" name="bigMoneySwtich"></el-tab-pane>
       <el-tab-pane label="高通过率" name="morePassSwitch"></el-tab-pane>
       <el-tab-pane label="每日一款" name="oneDailySwitch"></el-tab-pane>
      <el-tab-pane label="今日推荐" name="todaySwitch"></el-tab-pane>
      <el-tab-pane label="快捷推荐" name="quickSwitch"></el-tab-pane>
      <el-tab-pane label="为您推荐" name="recommendSwitch"></el-tab-pane>
      <el-tab-pane label="贷款罗盘" name="listSwitch"></el-tab-pane>
      <el-tab-pane label="必下款" name="mustSwitch"></el-tab-pane>
    </el-tabs>
    <el-select v-model="productStatus" placeholder="状态" style="width:120px;" @change="productStatusChange">
      <el-option
      v-for="item in productStatusOption"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      </el-option>
    </el-select>
    <el-input placeholder="请输入产品名称" style="width:200px;" v-model="productName"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
    <el-button class="add-btn fr" icon="el-icon-edit" @click="addProduct">添加产品</el-button>
    <el-table
      border fit highlight-current-row
      :data="tableData"
      style="width: 100%; margin: 15px 0 30px;">
      <el-table-column
        align="center"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
          align="center"
          label="产品/产品url链接"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.productName}}</span>
            <el-button class="ml10" type="text" size="small" v-clipboard:copy="scope.row.productShortUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制url</el-button>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <p>{{statusMapping[scope.row.status + '']}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="位置"
          width="200">
          <template slot-scope="scope">
            <span style="color:#f00;font-weight:bold;">{{scope.row.windowSwitch ? '首': ''}}</span>
            <span style="color:#f00;font-weight:bold;">{{scope.row.horseSwitch ? '跑': ''}}</span>
            <span style="color:#f00;font-weight:bold;">{{scope.row.secondBatchSwitch ? '秒': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.zmSwitch ? '芝': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.noValidateSwitch ? '不': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.idcardLoanSwitch ? '身': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.smallLoanSwitch ? '小': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.bigMoneySwtich ? '大': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.morePassSwitch ? '通': ''}}</span>
            <span style="color:green;font-weight:bold;">{{scope.row.oneDailySwitch ? '日': ''}}</span>
            <span style="color:orange;font-weight:bold;">{{scope.row.todaySwitch ? '今': ''}}</span>
            <span style="color:orange;font-weight:bold;">{{scope.row.quickSwitch ? '快': ''}}</span>
            <span style="color:orange;font-weight:bold;">{{scope.row.recommendSwitch ? '为': ''}}</span>
            <span style="color:orange;font-weight:bold;">{{scope.row.listSwitch ? '贷': ''}}</span>
            <span style="color:#999;font-weight:bold;">{{scope.row.mustSwitch ? '必': ''}}</span>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="产品后台url">
           <template slot-scope="scope">
            <el-button class="ml10" type="text" size="small" v-clipboard:copy="scope.row.productAdminUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制url</el-button>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="balanceMoney"
          label="金额">
      </el-table-column>
      <el-table-column
          align="center"
          prop="noSettlementMoney"
          label="未结金额">
          <template slot-scope="scope">
              <span>{{scope.row.noSettlementMoney }}</span>
             
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="结算模式|单价"
          width="100">
          <template slot-scope="scope">
            <p v-if="scope.row.settlementType ===0"> CPA | {{scope.row.settlementPrice || 0}}</p>
            <p v-if="scope.row.settlementType ===1"> UV | {{scope.row.settlementPrice || 0}}</p>
            <!-- <p v-if="scope.row.settlementType ===2"> CPS | {{scope.row.settlementPrice || 0}}</p> -->
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="每日UV|已完成">
          <template slot-scope="scope">
            <p>{{scope.row.uvNum || 0}} | {{scope.row.completeUvNum || 0}}</p>
          </template>
      </el-table-column>
      <el-table-column
        width="250"
        align="center"
        label="操作">
        <template slot-scope="scope">
            <el-button size="small" @click="modifyProduct(scope.row)">编辑</el-button>
            <el-button size="small" @click="productSetting(scope.row)">设置</el-button>
            <el-button size="small" @click="changeStatus(scope.row)">
                {{scope.row.status === 1 ? '下线' : '上线'}}
            </el-button>  
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="70%" class="dialog">
      <el-row class="line">
        <el-col>
          <span class="label"><span class="red">*</span>产品LOGO</span>
          <el-upload
            class="avatar-uploader"
            :action="getUploadOss()"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="addData.productImgUrl" :src="addData.productImgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>产品名称</span>
          <el-input placeholder="请输入产品名称" style="width: 250px;" v-model="addData.productName"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>产品描述</span>
          <el-input placeholder="请输入产品描述" style="width: 250px;" v-model="addData.productDesc"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label">申请条件</span>
          <el-input placeholder="请输入" style="width: 250px;" v-model="addData.applyCondition"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label">所需材料</span>
          <el-input placeholder="请输入" style="width: 250px;" v-model="addData.checkData"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label">短提示</span>
          <el-input placeholder="多个用英文逗号(,)分割" style="width: 250px;" v-model="addData.shortContent"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label">特别提示</span>
          <el-input placeholder="请输入特别提示" style="width: 250px;" v-model="addData.longContent"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <!-- <el-col :span="12">
          <span class="label"><span class="red">*</span>借款期限类型</span>
          <el-input placeholder="请输入" style="width: 250px;"></el-input>
        </el-col> -->
        <el-col :span="12">
          <span class="label"><span class="red">*</span>借款期限</span>
          <el-input style="width: 80px;" v-model="addData.loanPeriodLower"></el-input>
          <span>至</span>
          <el-input style="width: 80px;" v-model="addData.loanPeriodUpper"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>借款限制(元)</span>
          <el-input style="width: 80px;" v-model="addData.loanLower"></el-input>
          <span>至</span>
          <el-input style="width: 80px;" v-model="addData.loanUpper"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>最快放款</span>
          <el-input v-model="addData.loanSpeed" placeholder="如：3分钟，2小时，请勿输入“最快”和“放款”" style="width: 250px;"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>利率(%)</span>
          <el-input style="width: 80px;" v-model="addData.rate"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>申请人数</span>
          <el-input style="width: 80px;" v-model="addData.applyNum"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>单价</span>
        <el-input style="width: 80px;" v-model="addData.settlementPrice"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>结算模式</span>
          <el-select v-model="addData.settlementType" placeholder="状态" style="width:120px;" @change="settleChange">
            <el-option
            v-for="item in settleOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>原始推广页URL</span>
          <el-input style="width: 250px;" placeholder="请输入" v-model="addData.productUrl"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>推广页URL</span>
          <el-input style="width: 250px;" placeholder="请输入" v-model="addData.productShortUrl"></el-input>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>后台用户</span>
          <el-input style="width: 250px;" v-model="addData.productAccount" placeholder="请输入后台用户名"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label">后台密码</span>
          <el-input style="width: 250px;" v-model="addData.productPassword" placeholder="请输入后台密码"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>后台地址</span>
          <el-input style="width: 250px;" v-model="addData.productAdminUrl" placeholder="请输入后台地址"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 页面设置 -->
    <el-dialog title="设置" :close-on-click-modal="false" :visible.sync="dialogVisible_set" width="70%" class="dialog2">
      <el-row class="line" style="margin-bottom:30px;padding-bottom:30px;border-bottom:1px dotted #409EFF;">
        <span style="margin-right:30px;">首页弹窗<el-switch style="margin-left:10px;" v-model="pageSet.windowSwitch"></el-switch></span>
        <span style="margin-right:30px;">跑马灯<el-switch style="margin-left:10px;" v-model="pageSet.horseSwitch"></el-switch></span>
        <span style="margin-right:30px;">秒批口子<el-switch style="margin-left:10px;" v-model="pageSet.secondBatchSwitch"></el-switch></span>
        <span style="margin-right:30px;">芝麻分贷<el-switch style="margin-left:10px;" v-model="pageSet.zmSwitch"></el-switch></span>
        <span style="margin-right:30px;">身份证贷<el-switch style="margin-left:10px;" v-model="pageSet.idcardLoanSwitch"></el-switch></span>
        <span>不查征信<el-switch style="margin-left:10px;" v-model="pageSet.noValidateSwitch"></el-switch></span>
      </el-row>
      <el-row class="line" style="margin-bottom:30px;padding-bottom:30px;border-bottom:1px dotted #409EFF;">
        <span style="margin-right:30px;">今日推荐<el-switch style="margin-left:10px;" v-model="pageSet.todaySwitch"></el-switch></span>
        <span style="margin-right:30px;">快捷推荐<el-switch style="margin-left:10px;" v-model="pageSet.quickSwitch"></el-switch></span>
        <span style="margin-right:30px;">为您推荐<el-switch style="margin-left:10px;" v-model="pageSet.recommendSwitch"></el-switch></span>
        <span style="margin-right:30px;">贷款罗盘<el-switch style="margin-left:10px;" v-model="pageSet.listSwitch"></el-switch></span>
        <span>必下款<el-switch style="margin-left:10px;" v-model="pageSet.mustSwitch"></el-switch></span>
      </el-row>
      <el-row class="line" style="margin-bottom:30px;padding-bottom:30px;border-bottom:1px dotted #409EFF;">
        <span style="margin-right:30px;">小额贷款<el-switch style="margin-left:10px;" v-model="pageSet.smallLoanSwitch"></el-switch></span>
        <span style="margin-right:30px;">大额低息<el-switch style="margin-left:10px;" v-model="pageSet.bigMoneySwtich"></el-switch></span>
        <span style="margin-right:30px;">高通过率<el-switch style="margin-left:10px;" v-model="pageSet.morePassSwitch"></el-switch></span>
        <span style="margin-right:30px;">每日一款<el-switch style="margin-left:10px;" v-model="pageSet.oneDailySwitch"></el-switch></span>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label">每日UV</span>
          <el-input style="width: 80px;" v-model="pageSet.uvNum"></el-input>
        </el-col>
        <el-col :span="12">
          <span class="label">上线日期</span>
          <el-date-picker
            :editable="false"
            v-model="pageSet.onlineTime"
            style="width:250px;"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="选择日期"
            @change="dateChange">
          </el-date-picker>
        </el-col>
      </el-row>
  
      <el-row class="line">
        <el-col :span="12">
          <span class="label"><span class="red">*</span>状态</span>
          <el-select v-model="pageSet.status" placeholder="请选择" style="width:80px;" @change="productStatusChange2">
            <el-option
            v-for="item in productStatusOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-col>
         <el-col :span="12">
          <span class="label"><span class="red">*</span>是否开启米分</span>
          <el-switch v-model="pageSet.miScoreSwitch"></el-switch>
        </el-col>
      </el-row>
      
      <el-row class="line">
        <el-col :span="12">
          <span class="label">产品米分</span>
          <el-input style="width: 150px;" v-model="pageSet.miScore"></el-input>
        </el-col>
         <el-col :span="12">
          <span class="label">领取次数</span>
          <el-input style="width: 150px;" v-model="pageSet.miScoreNum"></el-input>
        </el-col>
      </el-row>

      <el-row class="line">
         <el-col :span="12">
          <span class="label"><span class="red">*</span>是否上架苹果</span>
          <el-switch v-model="pageSet.onshelfIosSwitch"></el-switch>
        </el-col>
        <el-col :span="12">
          <span class="label"><span class="red">*</span>是否上架安卓</span>
          <el-switch v-model="pageSet.onshelfAndroidSwitch"></el-switch>
        </el-col>
      </el-row>
      <el-row class="line">
        <el-col :span="12">
          <span class="label">开始时间</span>
          <el-time-select
            :editable="false"
            v-model="pageSet.startTime"
            style="width:250px;"
            format="HH:mm:ss"
            placeholder="请选择"
            :picker-options="{
              start: '00:00:',
              step: '00:15',
              end: '23:59'
            }"
            @change="timeStartChange">
          </el-time-select>
        </el-col>
        <el-col :span="12">
          <span class="label">结束时间</span>
          <el-time-select
            :editable="false"
            v-model="pageSet.endTime"
            style="width:250px;"
            format="HH:mm:ss"
            :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '23:59'
            }"
            placeholder="请选择"
            @change="timeEndChange">
          </el-time-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_set = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick_set">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import _base from '@/services/base.js'
  import _product from '@/services/product.js'
  export default {
    components: {
    },
    data() {
      return {
        statusMapping: {
          '0': '下线',
          '1': '上线',
          '2': '禁用'
        },
        query: {
          pageNum: 1,
          pageSize: 30
        },
        totalNum: 0,
        settleOption: [{
          value: 0,
          label:'CPA'
        }, {
          value: 1,
          label:'UV'
        }
        // , {
        //   value: 2,
        //   label:'CPS'
        // }
        ],
        tableData:[{
          productName: 'huahua',
          status: 1
        }],
        dialogTitle:"",
        dialogVisible: false,
        dialogVisible_set: false,
        productName: '',
        activeName: 'all',
        productStatus: 1,
        productStatusOption: [{
          value: 1,
          label:'上线'
        },{
          value: 0,
          label:'下线'
        }, {
          value: 2,
          label:'禁用'
        }],
        addData: {
          productImgUrl: '',
          productName: '',
          productDesc: '',
          applyCondition: '',//申请条件
          checkData: '',//所需材料
          shortContent: '',//短提示
          longContent: '',//特别提示
          loanPeriodLower: '',//借款期限下限
          loanPeriodUpper: '',//借款期限上限
          loanLower: '',//借款金额下限
          loanUpper: '',//借款金额上限
          loanSpeed: '',//最快放款描述
          rate: '',//利率
          applyNum: '',//申请人数
          settlementPrice: '',//结算单价
          settlementType: 0,//结算模式0CPA 1UV
          productUrl:'',//原始推广URL
          productShortUrl: '',//推广页URL
          productAccount: '',//后台用户名
          productPassword: '',//后台密码
          productAdminUrl: ''//后台地址
        },
        pageSet: {
          uvNum: '',//每日UV
          listWeight: '',//贷款罗盘权重
          mustWeight: '',//必下款权重
          recommendWeight: '',//为您推荐权重
          quickWeight: '',//快捷推荐权重
          windowSwitch: false,
          horseSwitch: false,
          secondBatchSwitch: false,
          zmSwitch: false,
          noValidateSwitch: false,
          idcardLoanSwitch: false,
          smallLoanSwitch:false,
          bigMoneySwtich:false,
          morePassSwitch:false,
          oneDailySwitch:false,
          quickSwitch: false,
          todaySwitch: false,
          recommendSwitch: false,
          listSwitch: false,
          mustSwitch: false,
          status: 0,
          onlineTime: '',//上线日期
          endTime: '',
          startTime: '',
          onshelfIosSwitch: false,
          onshelfAndroidSwitch: false,
          miScoreSwitch:false,
          miScore:'',
          miScoreNum:''
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 3600 * 1000 * 24
          }
        }
      }
    },
    methods: {
      // 复制成功
      onCopy(e){
        this.$msg.success('复制成功')
      },
      // 复制失败
      onError(e){
        this.$msg.error('复制失败')
      },
      getUploadOss(){
        console.log('_base.uploadToOss()', _base.uploadToOss())
        return _base.uploadToOss()
      },
      handleAvatarSuccess(res, file) {
        console.log('res', res)
        if (res.code === 200) {
          this.addData.productImgUrl = `https://chaolehua-main.oss-cn-shenzhen.aliyuncs.com/${res.result}`
        }
        console.log('this.addData.productImgUrl', this.addData.productImgUrl)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isGIF = file.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG && !isGIF) {
          this.$msg.error('上传图片只能是 JPG/PNG/GIF 格式!')
        }
        if (!isLt2M) {
          this.$msg.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG || isPNG || isGIF) && isLt2M
      },
      // 日期下拉选择
      dateChange(val){
        console.log('dateValue', this.pageSet.onlineTime)
      },
      timeStartChange(val){
        console.log('val', this.pageSet.startTime)
      },
      timeEndChange(val){
        console.log('val', this.pageSet.endTime)
      },
      // 结算模式下拉选择
      settleChange(val){
        console.log('val', this.addData.settlementType)
      },
      // 修改状态 0 下线  1 上线  2 禁用
      changeStatus(item){
        let title = ""
        if(item.status === 0 || item.status === 2){
          title = '上架'
        }else{
          title = '下架'
        }
        this.$msgbox.confirm(`确认${title}该产品?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
          let params = {
            productId: item.id,
            status: item.status
          }
          _product.changeStatus(params)
          .then(res => {
            this.$msg.success(`${title}成功`)
            this.getList()
          })
          .catch(() => {
            this.$msg.error(`${title}失败，请重试`)
          })
        }).catch(() => {
        })
      },
      // 产品上架设置
      productSetting(item){
        _product.getProductSet({productId: item.id})
        .then(res => {
          this.pageSet = {
            productId: res.data.productId,
            uvNum: res.data.uvNum,//每日UV
            listWeight: res.data.listWeight,//贷款罗盘权重
            mustWeight: res.data.mustWeight,//必下款权重
            recommendWeight: res.data.recommendWeight,//为您推荐权重
            quickWeight: res.data.quickWeight,//快捷推荐权重
            windowSwitch: res.data.windowSwitch ? true : false,
            horseSwitch: res.data.horseSwitch ? true : false,
            secondBatchSwitch: res.data.secondBatchSwitch ? true : false,
            zmSwitch: res.data.zmSwitch ? true : false,
            noValidateSwitch: res.data.noValidateSwitch ? true : false,
            idcardLoanSwitch: res.data.idcardLoanSwitch ? true : false,

            smallLoanSwitch: res.data.smallLoanSwitch ? true : false,
            bigMoneySwtich: res.data.bigMoneySwtich ? true : false,
            morePassSwitch: res.data.morePassSwitch ? true : false,
            oneDailySwitch: res.data.oneDailySwitch ? true : false,

            quickSwitch: res.data.quickSwitch ? true : false,
            todaySwitch: res.data.todaySwitch ? true : false,

            recommendSwitch: res.data.recommendSwitch ? true : false,
            listSwitch: res.data.listSwitch ? true : false,
            mustSwitch: res.data.mustSwitch ? true : false,
            status: res.data.status || 0,
            onlineTime: res.data.onlineTime ? this._mapping.date_format2(res.data.onlineTime) : '',//上线日期
            endTime: res.data.endTime,
            startTime: res.data.startTime,
            onshelfIosSwitch: res.data.onshelfIosSwitch ? true : false,
            onshelfAndroidSwitch: res.data.onshelfAndroidSwitch ? true : false,

            miScoreSwitch:res.data.miScoreSwitch ? true : false,
            miScore:res.data.miScore,
            miScoreNum:res.data.miScoreNum
          }
          this.dialogVisible_set = true
        })
      },
      // 产品上架设置确认
      confirmClick_set(){
        let params = this.pageSet
        params.uvNum = Number(params.uvNum) || 0
        params.listWeight = Number(params.listWeight) || 0,//贷款罗盘权重
        params.mustWeight = Number(params.mustWeight) || 0,//必下款权重
        params.recommendWeight = Number(params.recommendWeight) || 0,//为您推荐权重
        params.quickWeight = Number(params.quickWeight) || 0,//快捷推荐权重
        params.windowSwitch = params.windowSwitch ? 1 : 0
        params.horseSwitch = params.horseSwitch ? 1 : 0
        params.secondBatchSwitch = params.secondBatchSwitch ? 1 : 0
        params.zmSwitch = params.zmSwitch ? 1 : 0
        params.noValidateSwitch = params.noValidateSwitch ? 1 : 0
        params.idcardLoanSwitch = params.idcardLoanSwitch ? 1 : 0

        params.smallLoanSwitch = params.smallLoanSwitch ? 1 : 0
        params.bigMoneySwtich = params.bigMoneySwtich ? 1 : 0
        params.morePassSwitch = params.morePassSwitch ? 1 : 0
        params.oneDailySwitch = params.oneDailySwitch ? 1 : 0

        params.miScoreSwitch = params.miScoreSwitch ? 1 : 0
        params.miScore = Number(params.miScore) || 0
        params.miScoreNum = Number(params.miScoreNum) || 0


        params.quickSwitch = params.quickSwitch ? 1 : 0
        params.todaySwitch = params.todaySwitch ? 1 : 0
        params.recommendSwitch = params.recommendSwitch ? 1 : 0
        params.listSwitch = params.listSwitch ? 1 : 0
        params.mustSwitch = params.mustSwitch ? 1 : 0
        params.status = params.status
        params.onlineTime = params.onlineTime
        params.endTime = params.endTime
        params.startTime = params.startTime
        params.onshelfIosSwitch = params.onshelfIosSwitch ? 1 : 0
        params.onshelfAndroidSwitch = params.onshelfAndroidSwitch ? 1 : 0
        _product.updateProductSet(params)
        .then(res => {
          if(res.data.code === 200){
            this.$msg.success('设置成功')
            this.getList()
            this.dialogVisible_set = false
          }else{
            this.$msg.error(res.data.msg)
          }
        })
      },
      // 添加产品
      addProduct(){
        this.dialogVisible = true
        this.dialogTitle = '添加产品'
        this.addData = {
          productImgUrl: '',
          productName: '',
          productDesc: '',
          applyCondition: '',//申请条件
          checkData: '',//所需材料
          shortContent: '',//短提示
          longContent: '',//特别提示
          loanPeriodLower: '',//借款期限下限
          loanPeriodUpper: '',//借款期限上限
          loanLower: '',//借款金额下限
          loanUpper: '',//借款金额上限
          loanSpeed: '',//最快放款描述
          rate: '',//利率
          applyNum: 0,//申请人数
          settlementPrice: 0,//结算单价
          settlementType: 0,//结算模式0CPA 1UV
          productUrl:'',//原始推广URL
          productShortUrl: '',//推广页URL
          productAccount: '',//后台用户名
          productPassword: '',//后台密码
          productAdminUrl: ''//后台地址
        }
      },
      // 编辑产品
      modifyProduct(item){
        this.dialogVisible = true
        this.dialogTitle = '编辑'
        this.addData = {
          id: item.id,
          productImgUrl: item.productImgUrl || '',
          productName: item.productName || '',
          productDesc: item.productDesc || '',
          applyCondition: item.applyCondition || '',//申请条件
          checkData: item.checkData || '',//所需材料
          shortContent: item.shortContent || '',//短提示
          longContent: item.longContent || '',//特别提示
          loanPeriodLower: item.loanPeriodLower || '',//借款期限下限
          loanPeriodUpper: item.loanPeriodUpper || '',//借款期限上限
          loanLower: item.loanLower || '',//借款金额下限
          loanUpper: item.loanUpper || '',//借款金额上限
          loanSpeed: item.loanSpeed || '',//最快放款描述
          rate: item.rate || '',//利率
          applyNum: item.applyNum || 0,//申请人数
          settlementPrice: item.settlementPrice || 0,//结算单价
          settlementType: item.settlementType || 0,//结算模式0CPA 1UV
          productUrl: item.productUrl || '',//原始推广URL
          productShortUrl: item.productShortUrl || '',//推广页URL
          productAccount: item.productAccount || '',//后台用户名
          productPassword: item.productPassword || '',//后台密码
          productAdminUrl: item.productAdminUrl || ''//后台地址
        }
      },
      // 添加/编辑产品确认
      confirmClick(){
        let params = this.addData
        if(params.applyNum){
          params.applyNum = Number(params.applyNum)
        }
        if(params.settlementPrice){
          params.settlementPrice = Number(params.settlementPrice)
        }
        if (this.dialogTitle === '添加产品') {
          delete params.productId
          _product.addProduct(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('添加成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        } else {
          _product.updateProduct(params)
            .then(res => {
                console.log('res', res.data)
                if(res.data.code === 200){
                    this.$msg.success('修改成功')
                    this.dialogVisible = false
                    this.getList()
                }else{
                    this.$msg.error(res.data.msg)
                }
            })
        }
      },
      // 搜索
      searchClick(){
        this.getList()
      },
      // 切换tab标签
      handleClick(item){
        this.getList()
      },
      productStatusChange(val){
        console.log('val', this.productStatus)
        this.getList()
      },
      productStatusChange2(val){
        console.log('val', this.pageSet.status)
      },
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.query.pageNum = val
        this.getList()
      },
      // 获取产品列表
      getList(){
        let params = {
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          productName: this.productName,
          status: this.productStatus
        }
        if(this.activeName !== 'all'){
          params[this.activeName] = 1
        }
        _product.getProductList(params)
        .then(res => {
          this.tableData = res.data.list
          this.totalNum = res.data.total
        })
      }
    },
    created(){
      this.getList()
    }
  }
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
.wrap{
  .avatar-uploader{
    display: inline-block;
    border-radius: 6px;
    border: 1px dotted #ccc;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .add-btn{
    width: 100px;
    background: $theme-color;
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
  }
  .dialog{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
  .dialog2{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
  .red{
    color: #f00;
  }
}
</style>